@mixin scroll {
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: inherit;
    background-color: rgba(144, 147, 153, 0.3);
    -webkit-transition: 0.3s background-color;
    transition: 0.3s background-color;
  }
}
.chat-room-modal-wrapper {
  .chat-room-modal {
    .ant-modal-content {
      height: 100%;

      .ant-modal-body {
        height: calc(100% - 55px);

        .chat-room-main {
          height: 100%;
          width: 100%;
          display: flex;

          .chat-room-card {
            height: 100%;

            .ant-card-body {
              height: 100%;
            }
          }

          .chat-room-left {
            height: 100%;
            width: 20%;
            overflow: hidden;

            .search-group {
              height: 32px;
              margin-bottom: 20px;
            }

            .result-group {
              height: calc(100% - 32px - 20px);
              width: calc(100% + 10px);
              padding: 0 10px 0 0;
              @include scroll();

              .result-item {
                margin-bottom: 10px;

                .result-item-card {
                  border-radius: 20px;

                  .ant-card-body {
                    padding: 10px;

                    .result-item-info {
                      display: flex;

                      // flex-wrap: nowrap;
                      label {
                        flex-shrink: 0;
                      }

                      span {
                        width: 0;
                        flex: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                      }
                    }
                  }
                }
              }

              .loading-box {
                width: 100%;
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .no-more {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 12px;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.45);
              }
            }
          }

          .chat-room-center {
            height: 100%;
            width: 50%;
            overflow: hidden;

            .ant-card-body {
              padding: 0;
            }

            .base-info-group {
              height: 20%;
              border-bottom: 1px solid rgba(0, 0, 0, 0.08);
              padding: 20px 30px;
              display: flex;
              flex-wrap: wrap;

              .base-info-item {
                width: 50%;
                display: flex;
                align-items: center;
                padding-right: 10px;

                label {
                  flex-shrink: 0;
                  margin-right: 10px;
                  font-size: 14px;
                  font-weight: 600;
                }

                span {
                  flex: 1;
                  width: 0;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
              }
            }

            .chat-content-box {
              height: 55%;
              border: 1px solid rgba(0, 0, 0, 0.08);
              position: relative;

              .chat-content-main {
                width: 100%;
                height: 100%;
                padding: 20px;

                .chat-content-list {
                  height: calc(100% - 35px);
                  width: 100%;
                  padding: 0 5px;
                  @include scroll();

                  .chat-content-item {
                    display: flex;
                    width: 100%;
                    margin-bottom: 20px;

                    .avatar-box {
                      width: 29px;
                      height: 29px;
                      border-radius: 50%;
                      overflow: hidden;
                      background: #F4F7F8;
                      margin: 5px 10px 0 0;
                      cursor: pointer;

                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }

                    .msg-box {
                      max-width: 60%;
                      height: auto;

                      .msg-date {
                        margin-bottom: 0px;
                        text-align: left;
                      }

                      .msg-content {
                        background-color: #F4F7F8; // F4F7F8
                        padding: 10px;
                        border-radius: 5px;
                        position: relative;
                        color: #747771;
                        white-space: pre-wrap;
                        &:after {
                          display: none;
                        }
                        &:before {
                          content: '';
                          position: absolute;
                          display: inline-block;
                          width: 0;
                          height: 0;
                          /* 箭头靠左边 */
                          top: 6px;
                          left: -6px;
                          border-top: 8px solid transparent;
                          border-bottom: 8px solid transparent;
                          border-right: 8px solid #F4F7F8;
                        }
                      }
                    }
                  }

                  .chat-content-item.right {
                    flex-direction: row-reverse;

                    .avatar-box {
                      margin: 5px 0 0 10px;
                    }

                    .msg-box {
                      .msg-date {
                        text-align: right;
                      }
                      .msg-content {
                        background-color: #DCF8C6;
                        &:before {
                          display: none;
                        }
                        &:after {
                          content: '';
                          position: absolute;
                          display: inline-block;
                          width: 0;
                          height: 0;
                          /* 箭头靠右边 */
                          top: 6px;
                          right: -6px;
                          border-top: 8px solid transparent;
                          border-bottom: 8px solid transparent;
                          border-left: 8px solid #DCF8C6;
                        }
                      }
                    }
                  }
                }
              }

              .chat-content-active {
                position: absolute;
                bottom: 2px;
                left: 2px;
              }
            }

            .chat-input-box {
              height: 25%;

              .chat-input-main {
                height: calc(100% - 33px);
                margin-bottom: 1px;

                textarea {
                  height: 100%;
                  resize: none;
                  @include scroll();
                }
              }

              .chat-input-footer {
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
            }
          }

          .chat-room-right {
            height: 100%;
            width: 30%;

            .common-group {
              height: calc(100% - 32px);
              overflow: hidden;

              .common-phrases,
              .common-terms {
                height: calc(100% / 2 - 30px);
                margin-bottom: 30px;
                overflow: hidden;

                .common-title {
                  font-size: 16px;
                  font-weight: 600;
                  height: 20px;
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
                }

                .common-group {
                  height: calc(100% - 20px - 10px);
                  width: calc(100% + 10px);
                  padding: 0 10px 0 0;
                  @include scroll();

                  .common-item {
                    min-height: 36px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #FAFAFA;
                    border-radius: 10px;
                    padding: 5px 10px;
                    margin-bottom: 10px;
                    cursor: pointer;

                    .item-content {
                      width: calc(100% - 20px - 24px);
                    }

                    .delete-icon {
                      margin-left: 20px;
                      flex-shrink: 0;
                      font-size: 24px;
                      color: #ff4d4f;
                      cursor: pointer;
                      width: 24px;
                      height: 24px;
                      display: none;
                      align-items: center;
                      justify-content: center;
                    }

                    &:hover {
                      background-color: #FAFAFA;

                      .delete-icon {
                        display: flex;
                      }
                    }
                  }
                }
              }
            }

            .active-group {
              display: flex;
              height: 32px;

              .interval {
                width: 50px;
              }
            }
          }
        }
      }
    }
  }
}

.common-option-modal-wrapper {
  .common-option-modal {
    .common-option-main {
      .form-item {
        display: flex;
        margin-bottom: 20px;

        label {
          flex-shrink: 0;
          font-weight: 600;
          width: 80px;
          text-align: right;
        }

        .form-content {
          flex: 1;
          .ant-input-number {
            width: 100%;
          }
        }
      }
    }
  }
}

.arbitration-modal-wrapper {
  .arbitration-modal {
    .arbitration-main {
      .form-item {
        .form-content {
          margin-top: 10px;
        }
      }
    }
  }
}